<template>
  <div class="site-category-manage-layout">
    <!-- 站点切换器 -->
    <div class="site-selector">
      <el-card class="site-card">
        <div class="site-header">
          <h3>分站分类管理</h3>
          <el-select v-model="currentSite" placeholder="请选择站点" @change="onSiteChange" style="width: 200px;">
            <el-option label="煤炉" value="mercari" />
            <el-option label="雅虎日拍" value="yahoo_auction" />
            <el-option label="雅虎闲置" value="yahoo_flea" />
            <el-option label="煤炉闲置" value="mercari_flea" />
            <el-option label="乐天" value="rakuten" />
            <el-option label="亚马逊" value="amazon" />
          </el-select>
        </div>
        <div class="site-info" v-if="currentSite">
          <el-tag :type="getSiteTagType(currentSite)" size="large">
            {{ getSiteDisplayName(currentSite) }}
          </el-tag>
          <span class="site-desc">当前管理站点：{{ getSiteDisplayName(currentSite) }} 的分类体系</span>
        </div>
      </el-card>
    </div>

    <!-- 分类管理内容 -->
    <div v-if="currentSite" class="category-content">
      <!-- 左侧分类树区 -->
      <aside class="category-sidebar">
        <div class="panel-title">分类结构</div>
        <el-tree
          :data="categoryTree"
          :props="treeProps"
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          draggable
          @node-click="onCategoryClick"
          @node-drop="onCategoryDrop"
          class="category-tree"
        >
          <template #default="{ node, data }">
            <div class="category-node">
              <img v-if="data.logo" :src="data.logo" class="category-node-logo" />
              <el-icon v-else class="category-node-icon"><Folder /></el-icon>
              <span class="category-node-name">{{ data.name }}</span>
            </div>
            <el-button size="small" type="text" @click.stop="onEditCategory(data)">编辑</el-button>
            <el-button size="small" type="danger" @click.stop="onDeleteCategory(data)">删除</el-button>
          </template>
        </el-tree>
        <el-button type="primary" class="add-category-btn" @click="onAddCategory(null)">添加分类</el-button>
      </aside>
      
      <!-- 右侧详情区 -->
      <section class="category-main">
        <el-card class="category-card">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本信息" name="base">
              <div v-if="currentCategory">
                <el-form :model="currentCategory" label-width="80px" style="max-width:400px;">
                  <el-form-item label="分类Logo">
                    <div class="category-info-logo">
                      <img v-if="currentCategory.logo" :src="currentCategory.logo" class="category-info-logo-img" />
                      <el-icon v-else class="category-info-logo-icon"><Folder /></el-icon>
                      <span class="category-info-logo-text">{{ currentCategory.logo ? '已上传Logo' : '未上传Logo' }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="分类名称">
                    <el-input v-model="currentCategory.name" />
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="currentCategory.desc" />
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-switch v-model="currentCategory.enabled" active-text="启用" inactive-text="禁用" />
                  </el-form-item>
                  <el-form-item label="排序">
                    <el-input-number v-model="currentCategory.sort" :min="1" />
                  </el-form-item>
                  <el-form-item label="父级分类">
                    <span>{{ getParentName(currentCategory) }}</span>
                  </el-form-item>
                </el-form>
              </div>
              <div v-else class="empty-tip">请选择左侧分类节点</div>
            </el-tab-pane>
            
            <el-tab-pane label="分类标签" name="tags">
              <div v-if="currentCategory">
                <div class="info-row" style="font-weight:600;">已分配标签：</div>
                <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;">
                  <template v-if="categoryTags[currentCategory.id] && categoryTags[currentCategory.id].length">
                    <el-tag
                      v-for="tid in categoryTags[currentCategory.id]"
                      :key="tid"
                      :color="getTagColor(tid)"
                      closable
                      @close="removeTagFromCategory(currentCategory.id, tid)"
                      style="color:#fff;font-weight:500;"
                    >{{ getTagName(tid) }}</el-tag>
                  </template>
                  <span v-else style="color:#aaa;">暂无标签</span>
                </div>
                <div class="info-row" style="font-weight:600;">添加标签：</div>
                <div style="display:flex;gap:10px;flex-wrap:wrap;">
                  <el-tag
                    v-for="tag in availableTags(currentCategory.id)"
                    :key="tag.id"
                    :color="tag.color"
                    style="color: #fff;cursor:pointer;"
                    @click="addTagToCategory(currentCategory.id, tag.id)"
                  >{{ tag.name }} <el-icon style="margin-left:4px;"><Plus /></el-icon></el-tag>
                </div>
              </div>
              <div v-else class="empty-tip">请选择左侧分类节点</div>
            </el-tab-pane>
            
            <el-tab-pane label="平台映射" name="mapping">
              <div v-if="currentCategory">
                <div class="mapping-header">
                  <h4>当前站点：{{ getSiteDisplayName(currentSite) }}</h4>
                  <p class="mapping-desc">只能映射到 {{ getSiteDisplayName(currentSite) }} 的平台分类</p>
                </div>
                <el-table :data="getMappingsForCurrentCategory(currentCategory.id, currentSite)" border stripe class="mapping-table">
                  <el-table-column prop="platformCategoryId" label="平台分类ID" width="160" />
                  <el-table-column prop="platformCategoryName" label="平台分类名称" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="onEditMapping(currentCategory.id, scope.row, currentSite)">编辑</el-button>
                      <el-button size="small" type="danger" @click="onDeleteMapping(currentCategory.id, scope.row, currentSite)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button type="primary" class="add-mapping-btn" @click="onAddMapping(currentCategory.id, currentSite)">新增映射</el-button>
              </div>
              <div v-else class="empty-tip">请选择左侧分类节点</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </section>
    </div>

    <!-- 分类新增/编辑弹窗 -->
    <el-dialog v-model="showCategoryDialog" :title="categoryForm.id ? '编辑分类' : '新增分类'" width="500px">
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="分类名称"><el-input v-model="categoryForm.name" /></el-form-item>
        <el-form-item label="分类Logo">
          <el-upload
            class="category-logo-uploader"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleLogoChange"
            accept="image/*"
          >
            <img v-if="categoryForm.logo" :src="categoryForm.logo" class="category-logo" />
            <el-icon v-else class="category-logo-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">建议尺寸：120x120px，支持 JPG、PNG 格式</div>
        </el-form-item>
        <el-form-item label="上级分类">
          <el-cascader v-model="categoryForm.parentIds" :options="categoryTree" :props="{ value: 'id', label: 'name', children: 'children', checkStrictly: true, emitPath: true }" clearable />
        </el-form-item>
        <el-form-item label="排序"><el-input-number v-model="categoryForm.sort" :min="1" /></el-form-item>
        <el-form-item label="状态"><el-switch v-model="categoryForm.enabled" active-text="启用" inactive-text="禁用" /></el-form-item>
        <el-form-item label="描述"><el-input v-model="categoryForm.desc" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCategoryDialog = false">取消</el-button>
        <el-button type="primary" @click="onSaveCategory">保存</el-button>
      </template>
    </el-dialog>
    
    <!-- 映射新增/编辑弹窗 -->
    <el-dialog v-model="showMappingDialog" :title="mappingForm.id ? '编辑映射' : '新增映射'" width="400px">
      <el-form :model="mappingForm" label-width="80px">
        <el-form-item label="平台分类">
          <div class="platform-info">
            <el-tag :type="getSiteTagType(currentSite)" size="small" style="margin-bottom: 8px;">
              {{ getSiteDisplayName(currentSite) }}
            </el-tag>
            <p class="platform-desc">只能选择 {{ getSiteDisplayName(currentSite) }} 的平台分类</p>
          </div>
          <el-cascader
            v-model="mappingForm.platformCategory"
            :options="getPlatformCategoryOptions(currentSite)"
            :props="{ value: 'id', label: 'labelWithId', children: 'children', emitPath: true }"
            clearable
            placeholder="请选择平台分类"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showMappingDialog = false">取消</el-button>
        <el-button type="primary" @click="onSaveMapping">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Plus, Folder } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 站点相关
const currentSite = ref('')
const sites = [
  { value: 'mercari', label: '煤炉', type: 'primary' },
  { value: 'yahoo_auction', label: '雅虎日拍', type: 'success' },
  { value: 'yahoo_flea', label: '雅虎闲置', type: 'warning' },
  { value: 'mercari_flea', label: '煤炉闲置', type: 'danger' },
  { value: 'rakuten', label: '乐天', type: 'info' },
  { value: 'amazon', label: '亚马逊', type: 'success' }
]

// 获取站点显示名称
function getSiteDisplayName(siteValue: string): string {
  const site = sites.find(s => s.value === siteValue)
  return site ? site.label : siteValue
}

// 获取站点标签类型
function getSiteTagType(siteValue: string): string {
  const site = sites.find(s => s.value === siteValue)
  return site ? site.type : 'info'
}

// 站点切换处理
function onSiteChange(site: string) {
  currentSite.value = site
  // 重新加载当前站点的分类数据
  loadSiteCategories(site)
  // 重置当前选中的分类
  currentCategory.value = null
}

// 加载站点分类数据
function loadSiteCategories(site: string) {
  // 这里应该根据站点加载对应的分类数据
  // 暂时使用mock数据，实际应该调用API
  console.log(`加载站点 ${site} 的分类数据`)
}

// 分类树数据（基于全站分类，但可以自定义）
const categoryTree = ref([
  { id: 1, name: '服装服饰', enabled: true, sort: 1, desc: '服装、服饰及相关配件', children: [
    { id: 11, name: '男装', enabled: true, sort: 1, desc: '男士服装', children: [] },
    { id: 12, name: '女装', enabled: true, sort: 2, desc: '女士服装', children: [] }
  ] },
  { id: 2, name: '电子产品', enabled: true, sort: 2, desc: '各类电子产品', children: [] },
  { id: 3, name: '书籍杂志', enabled: true, sort: 3, desc: '', children: [] },
  { id: 4, name: '家居用品', enabled: true, sort: 4, desc: '', children: [] },
  { id: 5, name: '游戏动漫', enabled: true, sort: 5, desc: '', children: [] },
  { id: 6, name: '美妆个护', enabled: true, sort: 6, desc: '', children: [] }
])

const treeProps = { label: 'name', children: 'children' }
const currentCategory = ref<any>(null)
const activeTab = ref('base')

function onCategoryClick(node: any) { 
  currentCategory.value = node 
}

// 分类标签 mock 数据
const tags = [
  { id: 1, name: '新品', color: '#4361ee' },
  { id: 2, name: '热卖', color: '#e63946' },
  { id: 3, name: '限时', color: '#f59e42' },
  { id: 4, name: '进口', color: '#2dba4e' }
]

// 分类与标签的关系（categoryId: tagId[]）
const categoryTags = ref<Record<number, number[]>>({
  1: [1,2],
  11: [3],
  12: [2,4]
})

function getTagName(tid: number) {
  return tags.find(t=>t.id===tid)?.name || ''
}

function getTagColor(tid: number) {
  return tags.find(t=>t.id===tid)?.color || '#999'
}

function availableTags(categoryId: number) {
  const assignedTags = categoryTags.value[categoryId] || []
  return tags.filter(t => !assignedTags.includes(t.id))
}

function addTagToCategory(categoryId: number, tagId: number) {
  if (!categoryTags.value[categoryId]) {
    categoryTags.value[categoryId] = []
  }
  categoryTags.value[categoryId].push(tagId)
  ElMessage.success('标签添加成功')
}

function removeTagFromCategory(categoryId: number, tagId: number) {
  if (categoryTags.value[categoryId]) {
    categoryTags.value[categoryId] = categoryTags.value[categoryId].filter(id => id !== tagId)
    ElMessage.success('标签移除成功')
  }
}

// 平台映射相关 - 只处理当前站点的平台分类

// 获取平台分类选项（只显示当前站点的分类）
function getPlatformCategoryOptions(currentSite: string) {
  // 这里应该调用API获取当前站点的分类树
  // 暂时返回mock数据，根据当前站点返回对应的分类
  const siteCategories: Record<string, any[]> = {
    'mercari': [
      {
        id: 'CAT001',
        labelWithId: 'CAT001 - 煤炉服装分类',
        children: [
          { id: 'CAT001-1', labelWithId: 'CAT001-1 - 煤炉男装' },
          { id: 'CAT001-2', labelWithId: 'CAT001-2 - 煤炉女装' }
        ]
      }
    ],
    'yahoo_auction': [
      {
        id: 'CAT002',
        labelWithId: 'CAT002 - 雅虎日拍电子产品',
        children: [
          { id: 'CAT002-1', labelWithId: 'CAT002-1 - 雅虎日拍手机' },
          { id: 'CAT002-2', labelWithId: 'CAT002-2 - 雅虎日拍电脑' }
        ]
      }
    ],
    'yahoo_flea': [
      {
        id: 'CAT003',
        labelWithId: 'CAT003 - 雅虎闲置家居用品',
        children: [
          { id: 'CAT003-1', labelWithId: 'CAT003-1 - 雅虎闲置家具' },
          { id: 'CAT003-2', labelWithId: 'CAT003-2 - 雅虎闲置装饰' }
        ]
      }
    ],
    'mercari_flea': [
      {
        id: 'CAT004',
        labelWithId: 'CAT004 - 煤炉闲置美妆',
        children: [
          { id: 'CAT004-1', labelWithId: 'CAT004-1 - 煤炉闲置护肤品' },
          { id: 'CAT004-2', labelWithId: 'CAT004-2 - 煤炉闲置彩妆' }
        ]
      }
    ],
    'rakuten': [
      {
        id: 'CAT005',
        labelWithId: 'CAT005 - 乐天书籍杂志',
        children: [
          { id: 'CAT005-1', labelWithId: 'CAT005-1 - 乐天小说' },
          { id: 'CAT005-2', labelWithId: 'CAT005-2 - 乐天杂志' }
        ]
      }
    ],
    'amazon': [
      {
        id: 'CAT006',
        labelWithId: 'CAT006 - 亚马逊游戏动漫',
        children: [
          { id: 'CAT006-1', labelWithId: 'CAT006-1 - 亚马逊游戏' },
          { id: 'CAT006-2', labelWithId: 'CAT006-2 - 亚马逊动漫' }
        ]
      }
    ]
  }
  
  return siteCategories[currentSite] || []
}

// 分类操作
const showCategoryDialog = ref(false)
const categoryForm = reactive({
  id: 0,
  name: '',
  logo: '',
  parentIds: [] as number[],
  sort: 1,
  enabled: true,
  desc: ''
})

function onAddCategory(parent: any) {
  categoryForm.id = 0
  categoryForm.name = ''
  categoryForm.logo = ''
  categoryForm.parentIds = parent ? [parent.id] : []
  categoryForm.sort = 1
  categoryForm.enabled = true
  categoryForm.desc = ''
  showCategoryDialog.value = true
}

function onEditCategory(category: any) {
  console.log('编辑分类:', category)
  categoryForm.id = category.id
  categoryForm.name = category.name
  categoryForm.logo = category.logo || ''
  categoryForm.parentIds = getParentIds(category)
  categoryForm.sort = category.sort
  categoryForm.enabled = category.enabled
  categoryForm.desc = category.desc || ''
  showCategoryDialog.value = true
}

function onDeleteCategory(category: any) {
  console.log('删除分类:', category)
  ElMessageBox.confirm(`确定要删除分类"${category.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 从分类树中删除该分类
    deleteCategoryFromTree(category.id)
    // 重置当前选中的分类
    if (currentCategory.value && currentCategory.value.id === category.id) {
      currentCategory.value = null
    }
    ElMessage.success('删除成功')
  }).catch(() => {
    // 用户取消删除
    console.log('用户取消删除')
  })
}

function onSaveCategory() {
  if (!categoryForm.name.trim()) {
    ElMessage.error('请输入分类名称')
    return
  }
  
  if (categoryForm.id) {
    // 编辑模式：更新现有分类
    updateCategoryInTree(categoryForm.id)
  } else {
    // 新增模式：添加新分类
    addCategoryToTree()
  }
  
  ElMessage.success('保存成功')
  showCategoryDialog.value = false
  // 刷新分类树显示
  refreshCategoryTree()
}

// 从分类树中删除分类
function deleteCategoryFromTree(categoryId: number) {
  const deleteFromArray = (categories: any[]): boolean => {
    for (let i = 0; i < categories.length; i++) {
      if (categories[i].id === categoryId) {
        categories.splice(i, 1)
        return true
      }
      if (categories[i].children && deleteFromArray(categories[i].children)) {
        return true
      }
    }
    return false
  }
  
  deleteFromArray(categoryTree.value)
}

// 更新分类树中的分类
function updateCategoryInTree(categoryId: number) {
  const updateInArray = (categories: any[]): boolean => {
    for (let i = 0; i < categories.length; i++) {
      if (categories[i].id === categoryId) {
        categories[i] = { ...categories[i], ...categoryForm }
        return true
      }
      if (categories[i].children && updateInArray(categories[i].children)) {
        return true
      }
    }
    return false
  }
  
  updateInArray(categoryTree.value)
}

// 添加新分类到分类树
function addCategoryToTree() {
  const newCategory = {
    id: Date.now(), // 临时ID，实际应该由后端生成
    name: categoryForm.name,
    logo: categoryForm.logo,
    enabled: categoryForm.enabled,
    sort: categoryForm.sort,
    desc: categoryForm.desc,
    children: []
  }
  
  if (categoryForm.parentIds.length > 0) {
    // 添加到指定父分类下
    const parentId = categoryForm.parentIds[categoryForm.parentIds.length - 1]
    addToParentCategory(parentId, newCategory)
  } else {
    // 添加到根级别
    categoryTree.value.push(newCategory)
  }
}

// 添加分类到指定父分类下
function addToParentCategory(parentId: number, newCategory: any) {
  const addToArray = (categories: any[]): boolean => {
    for (let i = 0; i < categories.length; i++) {
      if (categories[i].id === parentId) {
        if (!categories[i].children) {
          categories[i].children = []
        }
        categories[i].children.push(newCategory)
        return true
      }
      if (categories[i].children && addToArray(categories[i].children)) {
        return true
      }
    }
    return false
  }
  
  addToArray(categoryTree.value)
}

// 刷新分类树显示
function refreshCategoryTree() {
  // 强制重新渲染分类树
  const temp = [...categoryTree.value]
  categoryTree.value = []
  setTimeout(() => {
    categoryTree.value = temp
  }, 10)
}

function handleLogoChange(file: any) {
  // 这里应该处理logo上传
  const reader = new FileReader()
  reader.onload = (e) => {
    categoryForm.logo = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

function getParentIds(category: any): number[] {
  // 获取父级分类ID数组
  return []
}

function getParentName(category: any): string {
  // 获取父级分类名称
  return '无'
}

function onCategoryDrop(draggingNode: any, dropNode: any, dropType: any) {
  // 处理分类拖拽排序
  console.log('分类拖拽:', draggingNode, dropNode, dropType)
}

// 映射操作
const showMappingDialog = ref(false)
const mappingForm = reactive({
  id: 0,
  platformCategory: [] as any[],
  categoryId: 0,
  site: ''
})

// 存储映射数据的Map
const mappingsData = ref<Record<string, any[]>>({})

function onAddMapping(categoryId: number, currentSite: string) {
  mappingForm.id = 0
  mappingForm.platformCategory = []
  mappingForm.categoryId = categoryId
  mappingForm.site = currentSite
  showMappingDialog.value = true
}

function onEditMapping(categoryId: number, mapping: any, currentSite: string) {
  mappingForm.id = mapping.id
  mappingForm.platformCategory = [mapping.platformCategoryId]
  mappingForm.categoryId = categoryId
  mappingForm.site = currentSite
  showMappingDialog.value = true
}

function onDeleteMapping(categoryId: number, mapping: any, currentSite: string) {
  ElMessageBox.confirm(`确定要删除映射吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 从映射数据中删除
    deleteMappingFromData(categoryId, mapping.id, currentSite)
    ElMessage.success('删除成功')
  })
}

function onSaveMapping() {
  if (mappingForm.platformCategory.length === 0) {
    ElMessage.error('请选择平台分类')
    return
  }
  
  const platformCategoryId = mappingForm.platformCategory[mappingForm.platformCategory.length - 1]
  const platformCategoryName = getPlatformCategoryName(platformCategoryId, mappingForm.site)
  
  if (mappingForm.id) {
    // 编辑模式：更新现有映射
    updateMappingInData(mappingForm.id, platformCategoryId, platformCategoryName)
  } else {
    // 新增模式：添加新映射
    addMappingToData(platformCategoryId, platformCategoryName)
  }
  
  ElMessage.success('保存成功')
  showMappingDialog.value = false
}

// 获取平台分类名称
function getPlatformCategoryName(categoryId: string, site: string): string {
  const siteCategories = getPlatformCategoryOptions(site)
  const findCategoryName = (categories: any[], targetId: string): string => {
    for (const category of categories) {
      if (category.id === targetId) {
        return category.labelWithId
      }
      if (category.children) {
        const found = findCategoryName(category.children, targetId)
        if (found) return found
      }
    }
    return categoryId
  }
  
  return findCategoryName(siteCategories, categoryId)
}

// 添加映射到数据
function addMappingToData(platformCategoryId: string, platformCategoryName: string) {
  const key = `${mappingForm.categoryId}_${mappingForm.site}`
  if (!mappingsData.value[key]) {
    mappingsData.value[key] = []
  }
  
  const newMapping = {
    id: Date.now(),
    platformCategoryId,
    platformCategoryName
  }
  
  mappingsData.value[key].push(newMapping)
}

// 更新映射数据
function updateMappingInData(mappingId: number, platformCategoryId: string, platformCategoryName: string) {
  const key = `${mappingForm.categoryId}_${mappingForm.site}`
  if (mappingsData.value[key]) {
    const mapping = mappingsData.value[key].find(m => m.id === mappingId)
    if (mapping) {
      mapping.platformCategoryId = platformCategoryId
      mapping.platformCategoryName = platformCategoryName
    }
  }
}

// 删除映射数据
function deleteMappingFromData(categoryId: number, mappingId: number, site: string) {
  const key = `${categoryId}_${site}`
  if (mappingsData.value[key]) {
    const index = mappingsData.value[key].findIndex(m => m.id === mappingId)
    if (index > -1) {
      mappingsData.value[key].splice(index, 1)
    }
  }
}

// 获取当前分类在当前站点的映射（更新为使用真实数据）
function getMappingsForCurrentCategory(categoryId: number, currentSite: string) {
  const key = `${categoryId}_${currentSite}`
  return mappingsData.value[key] || []
}

// 页面加载时默认选择第一个站点
onMounted(() => {
  if (sites.length > 0) {
    currentSite.value = sites[0].value
    loadSiteCategories(currentSite.value)
  }
})
</script>

<style scoped>
.site-category-manage-layout {
  padding: 16px;
}

.site-selector {
  margin-bottom: 16px;
}

.site-card {
  border-radius: 8px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.site-header h3 {
  margin: 0;
  color: #303133;
}

.site-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-desc {
  color: #606266;
  font-size: 14px;
}

.category-content {
  display: flex;
  gap: 16px;
  min-height: 600px;
}

.category-sidebar {
  width: 300px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409EFF;
}

.category-tree {
  margin-bottom: 16px;
}

.category-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-node-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.category-node-icon {
  font-size: 20px;
  color: #909399;
}

.category-node-name {
  flex: 1;
}

.add-category-btn {
  width: 100%;
}

.category-main {
  flex: 1;
}

.category-card {
  height: 100%;
}

.empty-tip {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.info-row {
  margin-bottom: 12px;
  color: #303133;
}

.mapping-table {
  margin-bottom: 16px;
}

.add-mapping-btn {
  margin-top: 8px;
}

.category-info-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-info-logo-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.category-info-logo-icon {
  font-size: 60px;
  color: #909399;
}

.category-info-logo-text {
  color: #606266;
  font-size: 14px;
}

.category-logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-logo-uploader:hover {
  border-color: #409EFF;
}

.category-logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.category-logo {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.mapping-header {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
}

.mapping-header h4 {
  margin: 0 0 8px 0;
  color: #1890ff;
  font-size: 16px;
}

.mapping-desc {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.platform-info {
  margin-bottom: 12px;
}

.platform-desc {
  margin: 8px 0 0 0;
  color: #909399;
  font-size: 12px;
}
</style>
